HCL Notes and Domino Application Development wiki: Japanese - 日本語: Dojo Data Gridの機能と利用方法

Dojo Data Gridの機能と利用方法

Added by ~Sven Nonponeplop on February 3, 2014 | Version 1

Abstract

XPages Extension LibraryのDojo Data Gridの機能および利用方法について説明します

Tags: Extension Library, XPages Extension Library Japan Project, Dojo Data Grid

ShowTable of Contents

HideTable of Contents

1 概要
2 Dojo Data Gridとは
3 生成されるタグ
4 Dojo Data Gridで使用する主なプロパティ
5 Dojo Data Gridの使用例
6 サンプルの XPage ソースコード
7 調査環境

概要

XPages Extension Library「Dojo Data Grid」の機能および利用方法について説明します。

Dojo Data Gridとは

Dojoのデータグリッドと呼ばれる機能を使い、データを動的にテーブルに表示させることができるコントロールです。Dojoデータグリッドが標準で持つ列のソート機能や行の選択、編集など複雑なテーブル構造を生成することが可能になります。

生成されるタグ

このコントロールのタグは xe:djxDataGrid です。

	<xe:djxDataGrid id="djxDataGrid1"></xe:djxDataGrid>

Dojo Data Gridで使用する主なプロパティ

カテゴリ	プロパティ	説明
データ	store	グリッドのデータを取得するために使用されるDojo データストアオブジェ居を保持するJavascript変数の名前。初期バージョンから有効
	storeComponentId	RESTサービスコントロールID。これは実際のストアIDを参照するstoreプロパティより優先されます。初期バージョンから有効
	updateDelay	データストアから通知を受け取った後にこのコントロールを更新数rまでの遅延時間（ミリ秒）を指定します。初期バージョンから有効
基本	autoHeight	高さの自動調整。表示する行数を指定します。初期バージョンから有効
	binding	コントロールバインディング特定のコントロールプロパティにコントロールをバインドする式を指定します。初期バージョンから有効
	dir	方向方向を継承しないテキストに対して方向を指定します。有効は値は「LTR」（左から右）と「RTL」（右から左）です。初期バージョンから有効
	errorMessage	エラーメッセージコントロールのコンテンツのロード中2コントロールでエラーが発生した場合に表示されるメッセージを指定します。初期バージョンから有効
	escapeHTMLInData	データでHTMLをエスケープするデータ内の悪意あるコンテンツからの保護を有効にするかどうかを指定します。これはデフォルトで有効になっています。初期バージョンから有効
	headerMenu	ヘッダーメニューグリッドヘッダーのコンテキストメニューとして使用するメニューを指定します。初期バージョンから有効
	id	コントロールID コントロールの名前IDを指定します。単一のページで２つのコントロールが同じ名前IDを持つことはできません。初期バージョンから有効
	jsId	Javascript 変数ID グリッドオブジェクトを保持するために作成されるJavascript変数の名前。これは後からスクリプトで参照できます。初期バージョンから有効
	lang	言語コードコントロールの生成済みマークアップで使用される言語を示します。初期バージョンから有効
	loaded	読み込みページのロード時にコントロールを作成する必要があるかどうかを指定します。値は「true」にデフォルト設定されます。初期バージョンから有効
	loadingMessage	メッセージをロード中コントロールのコンテンツをロード中に表示されるメッセージを指定します。初期バージョンから有効
	query	照会データストアから項目をフェッチするために使用される照会を指定します。初期バージョンから有効
	rendered	レンダリングフラグ後続のすべてのフォーム送信でコントロールを表示するのが、処理するのかを指定します。初期バージョンから有効
	rendererType	レンダラタイプこのコントロールをエンコードおよびデコードするための適切なレンダラを（コントロールによって定義される「family」とともに）指定しますバージョン8.5.1から有効
	rowPerPage	ページ辺りの行数表示する行数を指定します。初期バージョンから有効
	selectable	選択可能このコントロール内でテキスト選択を有効にするかどうかを指定します。初期バージョンから有効
	selectionMode	選択モード行選択を処理する方法を指定します。初期バージョンから有効
	singleClickEdit	シングルグルクリックで編集セル編集モードに入るためにシングルクリックが必要かどうかを指定します。デフォルトでは、このプロパティはfalseです。これはセル編集モードに入るためにダブルクリックが必要であることを意味します。初期バージョンから有効

Dojo Data Gridの使用例

テストデータ200文書をDojo Data Gridで表示させた例

Dojo Data Grid 使用例

サンプルの XPage ソースコード

このサンプルを動作させるには、Open NITF XPages Extension Library Japan からダウンロードできるモジュールに含まれているXPagesExt.nsf からAllContents ビュー、サンプル文書をお手元のNSFにコピーして下さい。

Dojo Data Gridでは下記サンプルのようにまずを利用することで、表示させる文書を格納したビューからDojo Data Gridが扱えるdojo.data.FileStore という形式にコンバートしておくのが一般的です。

の内容をDojo Data Gridに渡すには、で定義したIDをのstoreComponentIdという属性に指定することでおこないます。
（例）storeComponentId="restService1"

さらに、の中で、を利用してテーブルの属性、列を定義していきます。

また参考として、最下部のの箇所では、クライアントJavascriptを利用してDojo Data Gridで選択された文書のUNIDを取得するサンプルコードを掲載しています。

	<?xml version="1.0" encoding="UTF-8"?>

	<xp:view xmlns:xp="http://www.ibm.com/xsp/core"

	    xmlns:xe="http://www.ibm.com/xsp/coreex"

	    xmlns:xc="http://www.ibm.com/xsp/custom">

	    <xp:br />

	    <xp:br />

	    <xe:restService id="restService1">

	        <xe:this.service>

	            <xe:viewItemFileService viewName="AllContacts"

	                defaultColumns="true" contentType="application/json" var="entry">

	                <xp:this.columns>

	                    <xe:restViewColumn name="ShortName">

	                        <xp:this.value><![CDATA[#{javascript:var e = entry.getColumnValue("EMail")

	if(e) {

	    var p = @UpperCase(@Left(e,"@"))

	    return p

	return ""}]]></xp:this.value>

	                    </xe:restViewColumn>

	                </xp:this.columns>

	            </xe:viewItemFileService>

	        </xe:this.service>

	    </xe:restService>

	    <xe:djxDataGrid id="djxDataGrid1"

	        style="width: 85em;height: 25em;padding: 1px" storeComponentId="restService1">

	        <!--

	            style="width: 85em;height: 25em;padding: 1px"

	            storeComponentId="restService1"> style="width: 85em;height:

	            25em;padding: 1px" store="restService3">

-->

	        <xe:djxDataGridColumn id="djxDataGridColumn6"

	            field="FirstName" width="auto" editable="true">

	        </xe:djxDataGridColumn>

	        <xe:djxDataGridColumn id="djxDataGridColumn7"

	            field="LastName" width="auto" editable="true">

	        </xe:djxDataGridColumn>

	        <xe:djxDataGridColumn id="djxDataGridColumn8"

	            field="City" width="auto">

	        </xe:djxDataGridColumn>

	        <xe:djxDataGridColumn id="djxDataGridColumn9"

	            field="EMail" width="auto">

	        </xe:djxDataGridColumn>

	        <xe:djxDataGridColumn id="djxDataGridColumn10"

	            field="ShortName" width="auto">

	        </xe:djxDataGridColumn>

	    </xe:djxDataGrid>

	    <xp:br />

	    <xp:br />

	    <!-- GridViewで選択された行のUNIDを取得して表示 -->

	    <xp:link escape="true" id="link2" text="選択された行文書のUNIDを取得">

	        <xp:eventHandler event="onclick" submit="false" immediate="false"

	            save="false">

	            <xp:this.script><![CDATA[var grid = dijit.byId('#{id:djxDataGrid1}');

	    var items = grid.selection.getSelected();

	    if(items.length) {

	        dojo.forEach(items, function(selectedItem) {

	            if(selectedItem!==null) {

	                dojo.forEach(grid.store.getAttributes(selectedItem), function(attribute){

	                    var value = grid.store.getValues(selectedItem, attribute);

	    //                alert('attribute: ' + attribute + ', value: ' + value);

	                    if(attribute === '@unid'){

	                        alert("選択されたUNID： "+value);

});

});

	    ]]></xp:this.script>

	        </xp:eventHandler>

	    </xp:link>

	</xp:view>

調査環境

Lotus Notes/Domino 9 + Extension Library

Attachments (0)

Versions (11)

Copy and paste this wiki markup to link to this article from another article in this wiki.

Link: